import React, { Component } from 'react'
import { StatusBar, Platform, View, TouchableOpacity, Text, BackHandler, WebView } from 'react-native'
import { connect } from 'react-redux'
import Icon from 'react-native-vector-icons/FontAwesome'

import styles from './Styles/HotelScreenStyle'

const WEBVIEW_REF = 'WEBVIEW_REF'

class HotelScreen extends Component {
  static navigationOptions = {
    header: null
  }
  constructor(props) {
    super(props)
    this.state = {canGoBack:false}
  }
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }
  onNavigationStateChange(navState) {
    this.setState({
      canGoBack: navState.canGoBack
    })
  }
  onBackPress = () => {
    if(this.state.canGoBack) {
      this.refs[WEBVIEW_REF].goBack()
      return true
    } else {
      this.props.navigation.goBack()
      return true
    }
  }
  onClosePress = () => {
    this.props.navigation.goBack()
    return true
  }
  render () {
    const { navigate, goBack } = this.props.navigation
    const token = this.props.token
    let header = null
    if (Platform.OS == 'ios') {
      header = (
        <View style={styles.header}>
          <View style={styles.headerLeft}>
            <TouchableOpacity
              onPress={this.onBackPress}
              style={{flexDirection:'row',alignItems:'center'}}>
              <Icon name='chevron-left' style={styles.headerIcon} />
              <Text> 返回</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={this.onClosePress}>
              <Text style={{marginLeft:10}}>关闭</Text></TouchableOpacity>
          </View>
          <View style={styles.headerCenter}>
            <Text style={styles.headerTitle}>联盟酒店</Text></View>
          <TouchableOpacity style={styles.headerRight}
            onPress={()=>navigate('WebScreen',{
              title:'我的订单',
              link:'http://www.jiankangdaowei.com/reservehotel/order/orderlist.html?token='+token})}>
            <Text style={styles.headerRightText}>我的订单</Text></TouchableOpacity>
        </View>
      )
    } else {
      header = (
        <View style={styles.header}>
          <View style={styles.headerLeft}>
            <TouchableOpacity onPress={this.onClosePress}>
              <Icon style={{paddingLeft:8,paddingRight:18}} size={20} name='remove' />
            </TouchableOpacity>
            <Text style={styles.headerTitle}>联盟酒店</Text>
          </View>
          <TouchableOpacity style={styles.headerRight}
            onPress={()=>navigate('WebScreen',{
              title:'我的订单',
              link:'http://www.jiankangdaowei.com/reservehotel/order/orderlist.html?token='+token})}>
              <Text style={{color:'rgba(0,0,0,0.87)'}}>
                我的订单</Text></TouchableOpacity>
        </View>
      )
    }
    return (
      <View style={{flex:1}}>
        <StatusBar translucent={false} barStyle='dark-content' backgroundColor='white' />
        {header}
        <WebView
          style={{flex:1}}
          ref={WEBVIEW_REF}
          startInLoadingState={true}
          onNavigationStateChange={this.onNavigationStateChange.bind(this)}
          source={{uri:'http://www.jiankangdaowei.com/reserveHotel?token='+token}} />
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    token: state.user.payload.token,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(HotelScreen)
